<%--
  Created by IntelliJ IDEA.
  User: lijch
  Date: 2021/4/4
  Time: 3:51 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户登录</title>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.request.contextPath}/css/boot3/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/boot3/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/user/login-index.css">
</head>
<body>
<div class="header">
    <div id="header_title">
        <a id="back_index" href="${pageContext.request.contextPath}/"> << 返回首页</a>
    </div>
</div>

<div class="container" style="width: 100%;">
    <div class="card-body"
         style="width: 40%;margin-left: 30%;margin-top: 8%;background-color: #F3F3F3;border-radius: 5%;opacity: 0.9">
        <div style="text-align: center;margin-bottom: 3%;"><h1>欢迎登录易书网</h1></div>
        <div class="row" style="text-align: center;width: 80%;margin-left: 10%">
            <div class="col-12">
                <div class="input-group">
                    <label class="input-group-addon">账&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                    <input type="text" class="form-control" id="account">
                </div>
            </div>
            <div class="col-12">
                <div class="input-group">
                    <label class="input-group-addon">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                    <input type="password" class="form-control" id="pass">
                </div>
            </div>
            <div class="col-5">
                <div class="input-group">
                    <label class="input-group-addon">验证码</label>
                    <input type="text" class="form-control" id="code" style="width: 8em">
                </div>
            </div>
            <div class="col-5" style="margin-left: 2%">
                <div class="input-group">
                    <img style="margin-left: 2em" id="imgVerify" src="" width="105px" height="35px" alt="点击更换验证码"
                         onclick="getVerify()"/>
                </div>
            </div>
            <div class="col-12">
                <div class="input-group" style="text-align: left">
                    <input type="checkbox" name="remeberMe" style="vertical-align: center" id="remeberMe" value="1"> 记住我
                </div>
            </div>
            <div class="col-12">
                <div class="input-group">
                    <button id="login-btn" class="btn btn-primary">登录</button>
                </div>
            </div>
            <div class="col-12">
                <div class="input-group">
                    <span>没有账号？去<a href="/register/index">注册</a></span>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document.body).ready(function () {

        $("#imgVerify").attr("src", "/getVerify?" + Math.random());

        $.ajax({
            type: "POST",
            url: "/user/getCookie",
            success: function (data) {
                console.log(data);
                $("#account").val(data.uemail);
                $("#pass").val(data.upass);
            },
            error: function () {
                alert("信息获取失败")
            }
        });
    });

    $("#login-btn").click(function () {
        to_login();
    });

    function getVerify() {
        var s = document.getElementById('imgVerify');
        s.src = "/getVerify?" + Math.random();
    }

    function to_login() {
        let account = $("#account").val();
        let pass = $("#pass").val();
        var val = $('input:checkbox[name="remeberMe"]:checked').val();
        let r = 0;
        if (val == null) {
            r = 0;
        } else {
            r = 1;
        }

        $.ajax({
            async: false,
            type: "POST",
            data: {"code": $("#code").val()},
            url: "/checkCode",
            success: function (code_result) {
                if (code_result == "success") {
                    $.ajax({
                        async: false,
                        type: "POST",
                        data: {"uPhone": account, "uEmail": account, "uPass": pass, "remeberMe": r},
                        url: "/user/login",
                        success: function (login_result) {
                            console.log(login_result);
                            if (login_result == "success") {
                                window.location.href = "/";
                            } else {
                                alert("账号密码错误");
                            }
                        }
                    });
                } else {
                    alert("验证码错误");
                    getVerify();
                }
            }
        });
    }

    $(document).keyup(function (event) {
        if (event.keyCode == 13) {
            to_login();
        }
    });
</script>
</body>
</html>
